$score-gauge-dimension: 128px;

.score-gauge {
  display: flex;

  &__legend {
    &-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    &-title {
      font-size: 16px;
      font-weight: 600;
      margin: 0;
      color: get-color(black);
    }

    &-value {
      font-size: 28px;
      font-weight: 400;

      &--good {
        color: get-color(green5);
      }

      &--warning {
        color: get-color(orange5);
      }

      &--critical {
        color: get-color(red5);
      }
    }
  }

  .chart-container {
    height: $score-gauge-dimension;
    width: $score-gauge-dimension;
  }
}
